<template>
    <div style="box-sizing: border-box;padding: 10px">
        <el-page-header @back="$router.go(-1)" content="视频上传">
        </el-page-header>
        <br>

        <div id="upload">
            <h3>选择视频</h3>
            <el-upload
                    name="multipartFiles"
                    accept=".mp4,.avi"
                    :headers="header"
                    :data="upData"
                    :limit="1"
                    ref="upload"
                    class="upload-demo"
                    :auto-upload="false"
                    :on-error="fail"
                    :on-success="success"
                    :before-upload="upBefore"
                    drag
                    :action="baseUrl+'/company/uploadData/'+cId"
                    multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传mp4/avi文件，且不超过500MB</div>
            </el-upload>

        </div>
        <h3>选择一个默认封面<span style="font-weight: 300;font-size:14px;font-style: italic">(你选择了封面{{upData.coverCode+1}})</span></h3>
        <div id="photo" v-for="(item,index) in imgs">
            <div @click="select(index)" :key="index" :class="upData.coverCode!=index?'img':'active'"><img :src="item.url" alt=""></div>
            <br><br><br>
        </div>
        <br><br><br><br><br><br>
        <div style="margin-top: 100px;">
            <h3>填写视频标题<span style="font-weight: 300;font-size:14px;font-style: italic">(你填写的视频标题是:"{{upData.title}}")</span></h3>
            <el-input style="width: 100%" v-model="upData.title"></el-input>
        </div>
        <br><br><br><br>
        <el-button style="width: 100%;" @click="submit" type="primary" >上传视频</el-button>
    </div>
</template>

<script>
    import {Message} from 'element-ui'
    import {baseUrl} from "@/network/baseUrl";

    export default {
        name: "uploadVideo",
        data(){
            return{
              baseUrl:baseUrl(),
                upData:{
                    coverCode:0,
                    title:'',
                },
                header:{
                    TOKEN:localStorage.getItem("TOKEN")
                },
                cId:localStorage.getItem('userId'),
                imgs:[
                    {url:require('@/assets/img/tab1.jpg')},
                    {url:require('@/assets/img/tab2.jpg')},
                    {url:require('@/assets/img/tab3.jpg')}
                ],
                active:false
            }
        },
        created() {

        },
        methods:{
          getCid(){
            return localStorage.getItem("userId")
          },
            select(index){
                this.upData.coverCode=index
            },
            success(response){
              if(response.code==100){
                Message.success(`上传视频"${this.upData.title}"成功!`)
                this.$router.go(-1)
                console.log(response)
              }else {
               Message.warning(response.msg)
                console.log(response)

              }

            },
          upBefore(file){
            let testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
            const extension = testmsg === 'mp4'
            const extension2 = testmsg === 'avi'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if(!extension && !extension2) {
              Message.warning("上传文件只能是 mp4/avi格式!")
              return false
            }else {
              return true
            }
          },
            fail(response){
              Message.error("上传视频失败!")
                console.log(response)
            },
            submitUpload() {
              if (!this.upData.title){
                Message.warning("标题不能为空~")
              }else
                this.$refs.upload.submit();
            },
            submit(){
                console.log(this.level);
                this.submitUpload()

            }
        }
    }
</script>

<style scoped>
    #upload{
        float: left;
        width: 250px;
        height: 300px;
        /*border: 1px dotted deepskyblue;*/
    }
    #photo{
        float: left;
    }
    img{
        width: 100%;
        height: 100%;
        transition: all .1s;
    }

    img:hover{
        transform: scale(1.2,1.3);

    }
    .img{
        float: left;
        width: 160px;
        height: 140px;
        margin-right: 20px;
        box-sizing: border-box;
        cursor: pointer;
        overflow: hidden;
        /*transition: all 1s;*/
    }
    .active{
        float: left;
        width: 160px;
        height: 140px;
        margin-right: 20px;
        box-sizing: content-box;
        cursor: pointer;
        overflow: hidden;
        border: #1a51f6 2px solid;
        /*transition: all .3s;*/
    }
    .img:hover{
        /*border: 2px solid blue;*/
    }
    /deep/ .el-upload-dragger{
      width:200px;
      height: 140px;
    }

</style>